<template>
  <div class="body">
    <!-- 顶部 -->
    <nav class="nav">
      <span class="back" @click="$router.go(-1)">&lt;</span> 收藏列表
    </nav>

    <!-- 渲染列表 -->
    <div v-if="collectList.length">
      <HouseItem
        v-for="item in collectList"
        :key="item.houseCode"
        :item="item"
      ></HouseItem>
    </div>

    <!-- 没有数据时 -->
    <div v-else>
      <p class="text">没有呀，快去收藏一个吧～</p>
    </div>
  </div>
</template>

<script>
import { getCollectList } from '@/api/user'
import HouseItem from '@/components/HouseItem.vue'

export default {
  components: {
    HouseItem
  },
  name: 'collect',
  data () {
    return {
      collectList: []
    }
  },
  async created () {
    const res = await getCollectList()
    this.collectList = res.body
    // console.log(this.collectList)
  },
  methods: {

  }
}
</script>

<style scoped lang="less">
.nav {
  height: 44px;
  border-bottom: 1px solid #e4e4e4;
  line-height: 44px;
  text-align: center;
  background: #4fc08d;
  color: #fff;
  .back {
    font-size: 18px;
    color: #fff;
    position: absolute;
    left: 10px;
    top: 0;
    transform: scale(1, 1.5);
  }
}
.text {
  // font-size: 16px;
  color: #b7b5b5;
  margin: 90px;
}
</style>
